<template>
  <div class="app-container">
    <el-card class="detail-card">
      <div slot="header" class="clearfix">
        <span>{{ currentSelectedDate }} {{ isPopup ? '考核任务' : '我的考核任务' }}</span>
        <!-- 休息按钮 -->
        <el-button 
          v-if="isPopup" 
          :type="isRestDay ? 'success' : 'warning'" 
          size="mini" 
          :icon="isRestDay ? 'el-icon-sunny' : 'el-icon-moon'"
          @click="handleToggleRest"
          style="float: right; margin-right: 10px;"
        >
          {{ isRestDay ? '取消休息' : '标记休息' }}
        </el-button>
        <el-button v-if="!isPopup" style="float: right; padding: 3px 0" type="text" @click="goBack">返回日历</el-button>
        <el-button v-if="isPopup" style="float: right; padding: 3px 0" type="text" @click="closePopup">关闭</el-button>
      </div>
      
      <!-- 休息日提示 -->
      <el-alert v-if="isRestDay" type="success" :closable="false" show-icon title="该日期已标记为休息日" style="margin-bottom:12px;" />
      
      <el-alert v-if="assessUserList.length>0 && !canSubmit" type="warning" :closable="false" show-icon description="当前日期不在可操作范围内，无法提交或修改。" style="margin-bottom:12px;" />
      
      <el-table v-loading="loading" :data="assessUserList" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column label="考核任务标题" align="center" prop="title" width="200" show-overflow-tooltip />
        <el-table-column label="考核任务描述" align="center" prop="description" width="250" show-overflow-tooltip />
        <el-table-column label="分数" align="center" prop="fraction" width="80">
          <template slot-scope="scope">
            <span :class="getScoreClass(scope.row.fraction)">{{ scope.row.fraction || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="任务时间" align="center" prop="taskDate" width="120">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.taskDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最终分数" align="center" prop="finalScore" width="140">
          <template slot-scope="scope">
            <span :class="getScoreClass(scope.row.finalScore)">{{ formatScore(scope.row.finalScore) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否完成" align="center" prop="isFinish" width="190">
          <template slot-scope="scope">
            <div class="status-container">
              <el-switch
                v-model="scope.row.isFinish"
                :active-value="1"
                :inactive-value="0"
                active-text="已完成"
                inactive-text="未完成"
                active-color="#67C23A"
                inactive-color="#F56C6C"
                :disabled="!rowCanOperate(scope.row)"
                @change="handleStatusChange(scope.row)"
                class="status-switch"
              ></el-switch>
            </div>
          </template>
        </el-table-column>
        <!-- 新增评分明细列 -->
        <!--
        <el-table-column label="评分明细" align="left" prop="scoreRecords" min-width="220">
          <template slot-scope="scope">
            <div class="score-records-list">
              <div v-if="!scope.row.scoreRecords || scope.row.scoreRecords.length === 0" class="score-records-empty">
                暂无评分记录
              </div>
              <div v-else>
                <div class="score-records-header">
                  <div class="score-records-cols">
                    <span>评分人</span>
                    <span>分数</span>
                  </div>
                  <el-link 
                    type="primary" 
                    :underline="false" 
                    class="score-refresh"
                    @click="refreshScoreRecords(scope.row)">
                    <i class="el-icon-refresh" style="margin-right:2px;"></i>
                  </el-link>
                </div>
                <div class="score-records-content">
                  <div 
                    v-for="(record, index) in scope.row.scoreRecords" 
                    :key="index" 
                    class="score-record-item">
                    <span class="record-role">{{ record.roleName || record.userName || '未知' }}</span>
                    <span class="record-score">{{ formatScore(computeRecordDisplayScore(scope.row, record)) }}</span>
                  
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        -->
        
        <el-table-column label="备注" align="left" prop="remark" min-width="260">
          <template slot-scope="scope">
            <div class="remark-list">
              <div v-if="parseRemarks(scope.row.remark).length === 0" class="remark-empty">暂无备注</div>
              <div v-for="(r, idx) in parseRemarks(scope.row.remark)" :key="idx" class="remark-item">
                <div style="display:flex;justify-content:space-between;align-items:center;gap:8px;">
                  <div>
                    <span class="remark-user">{{ r.user || '未知' }}</span>
                    <span class="remark-time">{{ r.time || '' }}</span>
                  </div>
                  <el-button 
                    v-if="isPopup && rowCanOperate(scope.row)"
                    type="text" 
                    size="mini" 
                    icon="el-icon-delete"
                    @click="deleteRemark(scope.row, idx)">
                    删除
                  </el-button>
                </div>
                <div class="remark-text">{{ r.text }}</div>
              </div>
            </div>
            <div v-if="isPopup && rowCanOperate(scope.row)" class="remark-editor">
              <el-input
                v-model="remarkInputById[scope.row.id]"
                placeholder="输入备注后回车或点击添加"
                size="small"
                @keyup.enter.native="addRemark(scope.row)"
              />
              <el-button size="mini" type="primary" @click="addRemark(scope.row)" style="margin-left:8px;">添加备注</el-button>
            </div>
          </template>
        </el-table-column>
        
      </el-table>
      
      <!-- 提交按钮区域 -->
      <div class="submit-section" v-if="assessUserList.length > 0">
        <el-button 
          type="primary" 
          size="medium" 
          icon="el-icon-check"
          @click="submitAllTasks"
          :disabled="assessUserList.length === 0 || !canSubmit"
          class="submit-all-btn"
        >
          提交所有任务
        </el-button>
        <span class="submit-info">
          已完成 {{ completedTaskCount }} 个任务，共 {{ assessUserList.length }} 个任务
        </span>
      </div>
      
      <div v-if="assessUserList.length === 0" class="empty-data">
        <el-empty description="该日期暂无考核记录"></el-empty>
      </div>
    </el-card>
  </div>
</template>

<script>
import { updateAssessUser, getAssessByDate } from "@/api/system/assessUser"
import { addAssessScore, toggleRestDay, getRestDays } from "@/api/system/assessScore"
import { listByAssessUser as listAssessRecordsByUser } from "@/api/system/assessRecord"
import { addAssessRecord } from "@/api/system/assessRecord"

export default {
  name: "AssessUserDetail",
  props: {
    selectedDate: {
      type: String,
      default: ''
    },
    userId: {
      type: [String, Number],
      default: null
    },
    isPopup: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 用户考核表格数据
      assessUserList: [],
      // 内部管理的日期，避免直接修改prop
      internalSelectedDate: this.selectedDate || this.$route.query.date || '',
      // 备注输入缓存（按行）
      remarkInputById: {},
      // 评分输入缓存
      scoreInputById: {},
      scoreRemarkById: {},
      // 是否为休息日
      isRestDay: false,
    }
  },
  created() {
    // 如果没有 selectedDate prop，尝试从 URL query 参数获取
    if (!this.selectedDate && this.$route.query.date) {
      this.internalSelectedDate = this.$route.query.date
    }
  },
  mounted() {
    // 如果没有 selectedDate prop，尝试从 URL query 参数获取
    if (!this.selectedDate && this.$route.query.date) {
      this.internalSelectedDate = this.$route.query.date
    }
  },
  beforeRouteEnter(to, from, next) {
    // 不在这里发起请求，交给 watcher 和 activated 处理，避免重复
    next()
  },
  beforeRouteUpdate(to, from, next) {
    next()
  },
  activated() {
    // 每次激活时都重新获取数据
    if (this.currentSelectedDate) {
      this.getAssessByDate()
    } else if (this.$route.query.date) {
      this.internalSelectedDate = this.$route.query.date
      this.$nextTick(() => {
        this.getAssessByDate()
      })
    }
  },
  watch: {
    currentSelectedDate: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.getAssessByDate()
        }
      },
      immediate: true
    }
  },
  computed: {
    // 获取当前日期（优先使用prop，然后是内部数据）
    currentSelectedDate() {
      return this.selectedDate || this.internalSelectedDate
    },
    // 已完成任务数量
    completedTaskCount() {
      return this.assessUserList.filter(task => task.isFinish === 1).length;
    },
    // 只要有一个任务可操作，就可提交
    canSubmit() {
      return this.assessUserList.some(it => {
        const op = (it && (it.operation !== undefined ? it.operation : it.isOperation))
        return !!op
      })
    }
  },
  methods: {
    /** 根据日期查询当前用户考核数据 */
    getAssessByDate() {
      if (!this.currentSelectedDate) {
        return
      }
      
      this.loading = true
      
      // 确保日期格式正确，转换为字符串格式
      let dateParam = this.currentSelectedDate
      if (typeof dateParam === 'string' && dateParam) {
        // 如果已经是字符串格式，直接使用
        dateParam = dateParam
      } else {
        // 如果是Date对象，转换为字符串
        const dateObj = new Date(this.currentSelectedDate)
        dateParam = dateObj.toISOString().split('T')[0] // 格式化为 yyyy-MM-dd
      }
      
      // 检查是否为休息日
      if (this.isPopup && this.userId) {
        this.checkRestDay()
      }
      
      // 如果是弹窗模式，需要传递用户ID
      const params = this.isPopup ? { 
        date: dateParam, 
        userId: this.userId 
      } : { 
        date: dateParam 
      }
      
      getAssessByDate(params).then(response => {
        // 后端返回的是AjaxResult，数据可能在response.data中
        if (response && response.data) {
          this.assessUserList = response.data
        } else if (response && Array.isArray(response)) {
          // 如果response本身就是数组
          this.assessUserList = response
        } else {
          this.assessUserList = []
        }
        
        // 默认加载每行评分记录并计算最终分数
        const rows = Array.isArray(this.assessUserList) ? this.assessUserList : []
        if (rows.length === 0) {
          this.loading = false
          return
        }
        Promise.all(rows.map(r => this.loadScoreRecords(r))).finally(() => {
          this.loading = false
        })
      }).catch(error => {
        this.loading = false
        this.$modal.msgError('获取考核数据失败: ' + (error.message || '未知错误'))
      })
    },
    // 行是否可操作
    rowCanOperate(row) {
      if (!row) return false
      if (row.operation !== undefined) return !!row.operation
      if (row.isOperation !== undefined) return !!row.isOperation
      return true
    },
    // 返回日历页面
    goBack() {
      try {
        this.$router.push('/system/assessUser')
      } catch (error) {
        // 如果路由跳转失败，尝试使用 replace
        this.$router.replace('/system/assessUser')
      }
    },
    // 关闭弹窗
    closePopup() {
      this.$emit('close')
    },
    /** 修改完成状态 */
    handleStatusChange(row) {
      const isFinish = row.isFinish
      const id = row.id
      const fraction = row.fraction
      
      let finalScore
      if (isFinish === 1) {
        // 已完成：取当前任务分数
        finalScore = Number(fraction) || 0
      } else {
        // 未完成：0分
        finalScore = 0
      }
      
      const updateData = { 
        id: parseInt(id), 
        isFinish: parseInt(isFinish),
        finalScore: parseFloat(finalScore.toFixed(2))
      }
      // 弹窗模式下传被审批人ID
      if (this.isPopup && this.userId) {
        updateData.userId = this.userId
      }
      
      updateAssessUser(updateData).then(() => {
        // 更新成功后，重新获取数据以获取正确的最终分数
        this.getAssessByDate()
        this.$modal.msgSuccess("更新成功")
      }).catch(() => {
        // 恢复原状态
        row.isFinish = isFinish === 1 ? 0 : 1
      })
    },
    // 弹窗模式: 修改最终分数
    handleFinalScoreChange(row) {
      if (!this.isPopup || !row || row.id == null) return
      const payload = {
        id: parseInt(row.id),
        // 不改变完成状态，仅更新最终分数
        finalScore: parseFloat((row.finalScore || 0).toFixed(2))
      }
      
      // 在弹窗模式下添加 userId 参数
      if (this.isPopup && this.userId) {
        payload.userId = this.userId
      }
      
      updateAssessUser(payload).then(() => {
        // 更新成功后，重新获取数据以获取正确的最终分数
        this.getAssessByDate()
        this.$modal.msgSuccess('分数已保存')
      }).catch(() => {
        this.$modal.msgError('保存失败')
      })
    },
    // 解析备注JSON为数组
    parseRemarks(remarkStr) {
      if (!remarkStr) return []
      try {
        const parsed = JSON.parse(remarkStr)
        return Array.isArray(parsed) ? parsed : []
      } catch (e) {
        return []
      }
    },
    // 添加备注（仅弹窗可编辑）
    addRemark(row) {
      if (!this.isPopup || !row || row.id == null) return
      const text = (this.remarkInputById[row.id] || '').trim()
      if (!text) {
        this.$message.warning('请输入备注内容')
        return
      }
      const list = this.parseRemarks(row.remark)
      const newItem = {
        user: (this.$store && this.$store.state && this.$store.state.user && this.$store.state.user.nickName) || '我',
        text: text,
        time: new Date().toISOString().replace('T', ' ').slice(0, 19)
      }
      list.push(newItem)
      const payload = {
        id: parseInt(row.id),
        remark: JSON.stringify(list)
      }
      // 弹窗模式下传被审批人ID
      if (this.isPopup && this.userId) {
        payload.userId = this.userId
      }
      
      updateAssessUser(payload).then(() => {
        this.remarkInputById[row.id] = ''
        // 更新成功后，重新获取数据
        this.getAssessByDate()
        this.$modal.msgSuccess('备注已添加')
      }).catch(() => {
        this.$modal.msgError('备注保存失败')
      })
    },
    // 删除备注（仅弹窗可编辑）
    deleteRemark(row, index) {
      if (!this.isPopup || !row || row.id == null) return
      const list = this.parseRemarks(row.remark)
      if (index < 0 || index >= list.length) return
      list.splice(index, 1)
      const payload = {
        id: parseInt(row.id),
        remark: JSON.stringify(list)
      }
      // 弹窗模式下传被审批人ID
      if (this.isPopup && this.userId) {
        payload.userId = this.userId
      }
      
      updateAssessUser(payload).then(() => {
        row.remark = payload.remark
        this.$modal.msgSuccess('备注已删除')
      }).catch(() => {
        this.$modal.msgError('删除失败')
      })
    },
    // 加载评分记录
    loadScoreRecords(row) {
      if (!row.id) return Promise.resolve([])
      
      // 从后端加载评分记录
      return listAssessRecordsByUser(row.id).then(res => {
        const data = res && res.data ? res.data : []
        this.$set(row, 'scoreRecords', data)
              // 评分按开关统一为100或0，不再根据记录计算
      return data
      }).catch(err => {
        console.error('加载评分记录失败:', err)
        this.$set(row, 'scoreRecords', [])
        return []
      })
    },
    
    // 刷新评分记录
    refreshScoreRecords(row) {
      this.loadScoreRecords(row)
    },

    // 计算单行最终分数：Σ(评分分数/100 × 评分权重 × 任务分数)
    // 若权重大于1，按百分比换算（除以100）；若无记录则回退 row.finalScore
    getRowFinalScore(row) {
      if (!row) return 0
      const taskTotal = Number(row.fraction) || 0
      const records = Array.isArray(row.scoreRecords) ? row.scoreRecords : []
      if (taskTotal <= 0 || records.length === 0) {
        return Number(row.finalScore) || 0
      }
      const value = records.reduce((sum, r) => {
        const score = Number(r.fraction) || 0
        const rawWeight = Number(r.weight) || 0
        const weight = rawWeight > 1 ? rawWeight / 100 : rawWeight
        return sum + (score / 100) * weight * taskTotal
      }, 0)
      return parseFloat(value.toFixed(2))
    },

    // 计算单条评分在列表中的展示分数：评分分数/100 * 权重 * 任务分数
    computeRecordDisplayScore(row, record) {
      if (!row || !record) return 0
      const taskTotal = Number(row.fraction) || 0
      const score = Number(record.fraction) || 0
      const rawWeight = Number(record.weight) || 0
      const weight = rawWeight > 1 ? rawWeight / 100 : rawWeight
      const value = (score / 100) * weight * taskTotal
      return parseFloat(value.toFixed(2))
    },
    
    // 计算总分：Σ(评分分数/100 × 评分权重 × 任务分数)
    // 若权重大于1，按百分比换算（除以100）
    calculateTotalScoreFromAllRecords() {
      const rows = Array.isArray(this.assessUserList) ? this.assessUserList : []
      const total = rows.reduce((taskSum, task) => taskSum + this.getRowFinalScore(task), 0)
      return parseFloat(total.toFixed(2))
    },

    // 提交所有任务
    submitAllTasks() {
      if (this.assessUserList.length === 0) {
        this.$modal.msgWarning('没有任务可以提交');
        return;
      }
      if (!this.canSubmit) {
        this.$modal.msgWarning('当前没有可操作的任务');
        return;
      }
      
      this.$modal.confirm(`确认提交所有 ${this.assessUserList.length} 个任务吗？`).then(() => {
        // 计算所有任务的总分数：最终分数总和
        const totalScore = this.assessUserList.reduce((sum, row) => sum + (Number(row.finalScore) || 0), 0)
        
        // 准备考核分数数据
        const scoreData = {
          userId: this.isPopup ? this.userId : this.$store.state.user.id, // 被评分用户ID
          taskDate: this.currentSelectedDate, // 任务日期
          score: totalScore // 总分数
        };
        // 弹窗模式下已传被审批人ID于 userId 字段，无需额外字段
        
        // 调用考核分数接口
        addAssessScore(scoreData).then(response => {
          this.$modal.msgSuccess(`成功提交 ${this.assessUserList.length} 个任务，总分数：${scoreData.score}分！`);
          // 触发提交成功事件，通知父组件
          this.$emit('submit-success');
        }).catch(error => {
          this.$modal.msgError('提交失败：' + (error.message || '未知错误'));
        });
      }).catch(() => {
        // 用户取消
      });
    },
    // 新增评分记录（弹窗模式）
    submitAssessRecord(row) {
      if (!this.isPopup || !row || row.id == null) return
      const fraction = Number(this.scoreInputById[row.id])
      if (isNaN(fraction) || fraction < 0 || fraction > 100) {
        this.$message.warning('请输入0-100之间的评分分数')
        return
      }
      const remark = (this.scoreRemarkById[row.id] || '').trim()
      const payload = {
        assessUserId: parseInt(row.id),
        fraction: parseFloat(fraction.toFixed(2)),
        remark: remark || undefined,
        userId: this.$store && this.$store.state && this.$store.state.user ? this.$store.state.user.id : undefined // 当前评分人
      }
      addAssessRecord(payload).then(() => {
        this.$modal.msgSuccess('评分已添加')
        this.scoreInputById[row.id] = undefined
        this.scoreRemarkById[row.id] = ''
        // 重新加载该行评分记录
        this.loadScoreRecords(row)
      }).catch((e) => {
        this.$modal.msgError('评分添加失败：' + (e.message || '未知错误'))
      })
    },
    // 表格行样式
    tableRowClassName({ row, rowIndex }) {
      if (row.isFinish === 1) {
        return 'is-finished-row';
      }
      return '';
    },
    // 状态文字样式类
    getStatusTextClass(isFinish) {
      return isFinish === 1 ? 'status-completed' : 'status-incomplete';
    },
    // 分数样式
    getScoreClass(score) {
      // 返回空字符串，不应用任何样式类，所有分数都显示默认颜色
      return '';
    },
    // 格式化分数显示，保留两位小数
    formatScore(score) {
      if (score === null || score === undefined || score === '') {
        return '-';
      }
      return parseFloat(score).toFixed(2);
    },
    
    // 检查是否为休息日
    checkRestDay() {
      const yearMonth = this.currentSelectedDate.substring(0, 7) // yyyy-MM
      getRestDays(yearMonth, this.userId).then(res => {
        const restDays = res.data || []
        this.isRestDay = restDays.includes(this.currentSelectedDate)
      }).catch(() => {
        this.isRestDay = false
      })
    },
    
    // 切换休息状态
    handleToggleRest() {
      this.$confirm(
        this.isRestDay ? '确认取消休息标记吗？' : '确认标记该日期为休息日吗？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        // 将日期字符串转换为Date对象
        const dateStr = this.currentSelectedDate
        toggleRestDay({
          userId: this.userId,
          taskDate: dateStr
        }).then(res => {
          this.isRestDay = res.data.isRest
          this.$message.success(this.isRestDay ? '已标记为休息日' : '已取消休息标记')
          
          // 通知父组件刷新
          this.$emit('rest-day-changed')
        }).catch(err => {
          this.$message.error('操作失败：' + (err.message || '未知错误'))
        })
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.remark-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.remark-item {
  background: #f9fafb;
  border: 1px solid #eef0f2;
  border-radius: 4px;
  padding: 6px 8px;
}
.remark-user {
  font-weight: 600;
  margin-right: 8px;
}
.remark-time {
  color: #909399;
  font-size: 12px;
}
.remark-text {
  margin-top: 2px;
  white-space: pre-wrap;
}
.remark-empty {
  color: #909399;
  font-size: 12px;
}
.remark-editor {
  margin-top: 8px;
  display: flex;
  align-items: center;
}
.detail-card {
  margin-bottom: 20px;
}

.empty-data {
  text-align: center;
  padding: 40px 0;
}

/* 分数样式 */
.high-score {
  color: #67C23A; /* 优秀 */
}
.medium-score {
  color: #E6A23C; /* 良好 */
}
.low-score {
  color: #F56C6C; /* 不及格 */
}

/* 状态容器样式 */
.status-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.status-switch {
  margin-bottom: 0;
}

.status-switch ::v-deep .el-switch__label {
  font-size: 12px;
  font-weight: 500;
}

.status-switch ::v-deep .el-switch__core {
  width: 45px !important;
}

.status-switch ::v-deep .el-switch__label--left {
  left: 8px;
  font-size: 12px;
}

.status-switch ::v-deep .el-switch__label--right {
  right: 8px;
  font-size: 12px;
}

.status-text {
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-completed {
  color: #67C23A;
  background-color: #f0f9eb;
  border: 1px solid #c2e7b0;
}

.status-incomplete {
  color: #F56C6C;
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
}

/* 提交按钮区域样式 */
.submit-section {
  margin-top: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #e9ecef;
}

.submit-all-btn {
  background: linear-gradient(135deg, #409EFF, #67C23A);
  border: none;
  color: white;
  font-weight: 500;
  padding: 12px 24px;
  font-size: 14px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.submit-all-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #337ECC, #5DAF34);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.submit-all-btn:disabled {
  background: #C0C4CC;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.submit-info {
  display: block;
  margin-top: 12px;
  color: #606266;
  font-size: 13px;
}

/* 已完成行样式 */
.is-finished-row {
  background-color: #f0f9eb; /* 浅绿色背景 */
}

/* 评分记录样式 */
.score-records-list {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fafafa;
  font-size: 11px;
}

.score-records-empty {
  color: #909399;
  text-align: center;
  padding: 6px;
  font-size: 11px;
}

.score-records-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  font-weight: 600;
  color: #606266;
  font-size: 10px;
}

.score-records-cols {
  display: grid;
  grid-template-columns: 100px 70px;
  gap: 6px;
}

.score-records-content {
  max-height: 90px;
  overflow-y: auto;
}

.score-record-item {
  display: grid;
  grid-template-columns: 100px 70px;
  gap: 6px;
  padding: 3px 8px;
  border-bottom: 1px solid #f0f0f0;
  align-items: center;
}

.score-record-item:last-child {
  border-bottom: none;
}

.score-record-item:hover {
  background-color: #f5f7fa;
}

.record-role {
  color: #303133;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-score {
  color: #67C23A;
  font-weight: 600;
  text-align: center;
  font-size: 10px;
}

.score-refresh {
  margin: 0;
  padding: 0 4px;
  height: auto;
  line-height: 1;
  font-size: 10px;
  color: #409EFF;
  display: inline-flex;
  align-items: center;
}

.score-refresh:hover {
  color: #66b1ff;
}

.record-weight {
  color: #909399;
  text-align: center;
  font-size: 11px;
}

.record-time {
  color: #909399;
  font-size: 10px;
  text-align: center;
}

.record-remark {
  color: #606266;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-records-actions {
  padding: 6px 12px;
  text-align: right;
  border-top: 1px solid #f0f0f0;
  background-color: #fafafa;
}

.score-add {
  margin-top: 8px;
  display: flex;
  align-items: center;
}
</style> 